<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Blockly SQL Abfrage Generator</title>
		
        <!-- Start Includes for DEBUG (Google-Closure-Library is needed!) -->
        <script type="text/javascript" src="../common/modules/GoogleBlockly/blockly_uncompressed.js"></script>
        <script type="text/javascript" src="../common/modules/GoogleBlockly/blocks_compressed.js"></script>
        <!-- <script type="text/javascript" src="../common/modules/GoogleBlockly/msg/messages.js"></script> -->
        <script type="text/javascript" src="../common/modules/blockly-colour-gradient/colour-gradient.js"></script>
        <script type="text/javascript" src="../common/modules/blockly-type-indicator/typeIndicator.js"></script>
        <script type="text/javascript" src="../common/modules/blockly-events/events.js"></script>
        <script type="text/javascript" src="../common/modules/ace-builds/src/ace.js"></script>
        <script type="text/javascript" src="build/SQLBlockly.concat.js"></script>
        <!-- End Includes for DEBUG -->

        <!-- Start Includes for RELEASE -->
        <!-- <script type="text/javascript" src="libs/blockly/blockly_compressed.js"></script>
        <script type="text/javascript" src="libs/blockly/blocks_compressed.js"></script>
        <script type="text/javascript" src="libs/blockly/msg/en.js"></script> 
        <script type="text/javascript" src="dist/SQLBlockly.min.js"></script> -->
        <!-- End Includes for RELEASE -->

        <!-- Including StyleSheets -->
        <link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
    
    <body onload="main()" style="width: 100vw; height: 100vh; margin: 0; padding: 0;">

        <!-- Help Container -->
        <div id="help">
            <div id="sqlHelpBar">
                <a class="closeBtn CLOSE_BUTTON" onclick="closeHelp();">×</a>
                <h4 class="headBar HELP_BOX_HEADLINE">_</h4>
            </div>
            <div id="helpcontent"></div>
        </div>

        <div id="wrapper" style="width: 100vw; height: 100vh;">       
            
            <!-- Header -->
            <div id="head" style="padding-bottom: 3.5em;">
                <img src="img/p2fs.png" alt="SQL GUI" style="float: left;"> 
                
                <div style="float: left; margin: 1.25em; padding-left: 1em;">
                    <button class="sqlBtn EDIT_SQL_BUTTON" onclick="editStatement();">_</button>
                    <select id="languageSelect" onchange="new Language().updateLanguage(this.value);"></select>
                </div>
               
                <div class="odbc">
                    <h5 class="ODBC_HEADLINE">_</h5>
                    <select id="dataSourceNames" onchange="loadDatabaseStructure(this);"></select>
                    <button class="sqlBtn ADD_ODBC_BUTTON" onclick="openAddDataSource();">_</button>
                    <button class="sqlBtn DEL_ODBC_BUTTON" onclick="removeDataSource();">_</button>
                    <button class="sqlBtn UPDATE_ODBC_BUTTON" onclick="openUpdateDataSource();">_</button>
                </div>
            </div>

            <!-- Blockly Workspace -->
            <div id="blocklyDiv" style="width:100%; height:calc(100% - 88px)"></div>

            <!-- SQL Code Editor -->
            <div id="writeSQL">
                <div id="sqlEditorBar">
                    <a class="closeBtn CLOSE_BUTTON" onclick="closeCodeEditor();">×</a>
                    <h4 class="headBar CODE_EDITOR_HEADLINE">_</h4>
                </div>
                
                <div id="sqlStatement" class="textual"></div>
                
                <img src="img/icons/help.png" class="helpicon" onmouseover="setTooltip();" onmouseout="closeTooltip();">
                <p id="tooltip" class ="tooltips"></p>
                
                <button id="parseSQLBtn" onclick="parsingSQL();" class="okayy OK">_</button>
            </div>
            
            <!-- Error Box -->
            <div id="errorSQL">
                <div id="sqlErrorBar">
                    <a class="closeBtn CLOSE_BUTTON" onclick="closeErrorBox();">×</a>
                    <h4 class="headBar ERROR_MESSAGE_HEADLINE">_</h4>
                </div>

                <textarea id="sqlErrorMessage" name="text" class="textual" readonly="readonly"></textarea>
                <button id="toblock" onclick="closeErrorBox();" class="okayy OK">_</button>
            </div>

            <div id="addDSN">
                <div id="addDSNBar">
                    <a class="closeBtn CLOSE_BUTTON" onclick="closeAddDataSource();">×</a>
                    <h4 class="headBar ADD_ODBC_HEADLINE"></h4>
                </div>

                 <form id="addDSNForm" class="DSNForm">
                    <label for="add_dsn" class="DATA_SOURCE_NAME">_</label>
                    <input type="text" id="add_dsn" name="dsn"><br>
                    <label for="add_username" class="USER_NAME">_</label><br>
                    <input type="text" id="add_username" name="username"><br>
                    <label for="add_password" class="USER_PW">_</label><br>
                    <input type="password" id="add_password" name="password"><br><br>
                    <input id="add_button" type="button" onclick="addDataSource();" class="ADD_ODBC_BUTTON">
                </form> 
            </div>

            <div id="updateDSN">
                <div id="updateDSNBar">
                    <a class="closeBtn CLOSE_BUTTON" onclick="closeUpdateDataSource();">×</a>
                    <h4 class="headBar UPDATE_ODBC_HEADLINE">_</h4>
                </div>

                 <form id="updateDSNForm" class="DSNForm">
                    <label for="update_username" class="USER_NAME">_</label><br>
                    <input type="text" id="update_username" name="username"><br>
                    <label for="update_password" class="USER_PW">_</label><br>
                    <input type="password" id="update_password" name="password"><br><br>
                    <input type="button" onclick="updateDataSource();" class="UPDATE_ODBC_BUTTON">
                </form> 
            </div>
            
            <textarea id="notifications" name="text" class="textual" readonly="readonly"></textarea>
            
        </div>
 
    </body>
</html>